<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #main_container {
            background-color: #7d8fa3;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            position: absolute
        }

        #left_container {
            background-color: #1b1b1b;
            width: 20%;
            height: 90%;
            float: left;
            display: inline-block;
            overflow: scroll;
        }

        #right_container {
            background-color: #c42d3e;
            position: relative;
            display: inline-block;
            width: 20%;
            height: 90%;
            float: right;
            overflow: scroll;
        }

        #center_container {
            background-color: #1122c0c4;
            position: relative;
            display: inline-block;
            width: 60%;
            height: 90%;
        }


    </style>
</head>


<script id="template_slider_bar" type="notjs">

</script>

<body onload="main()">

<div id="main_container">

    <div id="top" style="background-color: #00bb00;height: 80px ;width: 100%; ">
        <input type="button" value="新建空间" title="新建空间" onclick="createRootSpace()">
        <input type="button" value="线框显示" title="线框显示" onclick="showEdgesHelper()">
        <input type="button" value="透视图" onclick="perspectiveView()">
        <input type="button" value="俯视图" onclick="topView()">
        <input type="button" value="前视图" onclick="frontView()">
        <input type="button" value="左视图" onclick="leftView()">
        <input type="button" value="显示摄像机" onclick="showCameraHelper()">
        <input type="button" value="刷新資源管理器" onclick="updateResource()">
        <input type="button" value="Box" onclick="createBox()">
        <input type="button" value="强制刷新" onclick="spaceRefreshForce()">
        <input type="button" value="线框显示空间" onclick="showSpaceWithLine()">
        <input type="button" value="线框随机颜色" onclick="randomEdgesLine()">
        <input type="button" value="打孔" onclick="makeHole()">

    </div>

    <div id="left_container">
        <div id="tabs_left">
            <ul>
                <li><a href="#resource_container">资源管理</a></li>
                <li><a href="#tabs-21">Proin</a></li>
                <li><a href="#tabs-31">Aenean</a></li>
            </ul>
            <div id="resource_container">

                <div id="resource"></div>

            </div>
            <div id="tabs-21">
                <p></p>
            </div>
            <div id="tabs-31">
                <p></p>
            </div>
        </div>
    </div>

    <div id="center_container">
        <canvas id="canvas_3d" style="width: 100% ; height: 100% ; background-color: #116F0752"></canvas>

        <!--<div id="view_1"></div>-->

    </div>

    <div id="right_container">
        <div id="tabs_right">
            <ul>
                <li><a href="#object3d_property">3D属性</a></li>
                <li><a href="#business_property">GSBuilder 属性</a></li>
                <li><a href="#business_debug">调试</a></li>

            </ul>

            <!--tab options-->
            <div id="object3d_property"></div>
            <div id="business_property">aaa</div>
            <div id="business_debug">调试</div>

        </div>
    </div>
</div>
</body>


<link rel="stylesheet" href="jquerylib/jquery-ui.css">
<script src="jquerylib/external/jquery/jquery.js"></script>
<script src="jquerylib/jquery-ui.js"></script>
<script src="gslib/three_compress.js"></script>
<script src="gslib/gsThree.js"></script>


<script src="gslib/goodstyle_treeview.js"></script>
<script src="business/index_business.js"></script>
<script src="build/gsresource.js"></script>
<script src="widget/widget.js"></script>


<link rel="stylesheet" href="gslib/jquery.treeview.css">


</html>